<template>
  <div>
    <a-modal
      :visible="visible"
      :maskClosable="maskClosable"
      :body-style="bodyStyle"
      :destroyOnClose="true"
      :okText="okText"
      :cancelText="cancelText"
      :width="width"
      :zIndex="zIndex"
      :closable="closable"
      :footer=" footer ? undefined : null"
      :wrapClassName="wrapClassName"
      @cancel="cancel"
    >
      <template slot="title">
        <div style="display:flex;justify-content:space-between;align-items:center">
          <span>{{title}}</span>
          <a-icon @click="toggleFullscreen" class="fullscreen" v-if="canFullScreen" type="fullscreen" />
        </div>
      </template>
      <slot></slot>
      <template slot="footer">
        <a-space>
          <a-button v-if="showCancelBtn" class="nbcs-btn nbcs-btn-common" @click="cancel">
            {{cancelText}}
          </a-button>
          <a-button
            v-if="showOkBtn"
            class="nbcs-btn nbcs-btn-main-bg"
            @click="ok"
          >
            {{okText}}
          </a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "MyModel",

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    footer: {
      type: Boolean,
      default: true
    },
    showOkBtn: {
      type: Boolean,
      default: true
    },
    showCancelBtn: {
      type: Boolean,
      default: true
    },
    okText: {
      type: String,
      default: "确定"
    },
    cancelText: {
      type: String,
      default: "取消"
    },
    width: {
      default: 520
    },
    zIndex: {
      type: Number,
      default: 1000
    },
    closable: {
      type: Boolean,
      default: true
    },
    maskClosable:{
      type: Boolean,
      default: true
    },
    canFullScreen:{
      type: Boolean,
      default: false
    },
    bodyStyle: {
      type: Object,
      default: () => {
        return { width: '100%', height: '100%' }
      }
    },
    wrapClassName: {
      default: undefined
    }
  },
  data() {
    return {};
  },
  methods: {
    //点击确定
    ok() {
      this.$emit("ok");
    },
    //点击取消
    cancel() {
      this.$emit("cancel");
    },
    toggleFullscreen(){
      this.$emit("toggleFullscreen");
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ant-modal-body{
  background: #F4F9FD;
}
.fullscreen{
  position: relative;
  left: -36px;
  color:#8C8C8C;
  top:1px;
  cursor: pointer;
}
</style>
